<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="../css/dialog.css"/>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
</head>
<body>
  <input id="open" class="dialog-open" type="button" style="margin:10px 10px" value="点击弹出遮罩层">


  <div id="zDialog" class="zDialog">
      <div class="dialog-panel" style="display: none">
          <div class="dialog-form">
            <div class="form-title"><span>标题</span></div>
            <div class="form-content">
              <div class="form-row">
                  <label class="form-label">姓名</label>
                  <input type="text" class="form-control" value="">
              </div>
              <div class="form-row">
                  <label class="form-label">密码</label>
                  <input type="password" class="form-control" value="">
              </div>
              <div class="form-row">
                  <label class="form-label">性别</label>
                  <select class="form-control">
                      <option value="male">男</option>
                      <option value="female">女</option>
                  </select>
              </div>
              <div class="form-row">
                  <label class="form-label">预期收入</label>
                  <div class="radio-group">
                      <input type="radio" value="1000">1000以下
                      <input type="radio" value="2000">1000-2000
                      <input type="radio" value="1000">2000-3000
                      <input type="radio" value="1000">3000-4000
                  </div>
              </div>
              <div class="form-row">
                  <label class="form-label">爱好</label>
                  <div class="checkbox-group">
                      <input type="checkbox" value="1000">摄影
                      <input type="checkbox" value="2000">写作
                      <input type="checkbox" value="1000">跑步
                      <input type="checkbox" value="1000">装逼
                  </div>
              </div>
              <div class="form-row">
                  <label class="form-label">简历</label>
                  <textarea class="form-control" rows="10"></textarea>
              </div>
              <div class="form-fix"></div>
            </div>
            <div class="form-bottom">
              <input type="button" class="form-btn OK-btn" value="提交"/>
            </div>
            <div class="dialog-cancel"></div>
          </div>
      </div>
      <div class="dialog-masker" style="display: none"></div>
  </div>

  <script type="text/javascript">
      $(function () {
          $("#open").click(function(e){
              e.preventDefault();
              showDialog($("#zDialog"));
          });

          function showDialog($dialog){
              $dialog.children(".dialog-masker").show();
              var $dialogPanel = $dialog.children(".dialog-panel");
              center($dialogPanel,120);
              $dialogPanel.show();
              $dialogPanel.children(".dialog-form").height($dialogPanel.height());
              $dialogPanel.children(".dialog-form").width($dialogPanel.width());
              $dialogPanel.one("click",".dialog-cancel",function(e){
                  e.preventDefault();
                  cancelDialog($dialog);
              });
          }

          function cancelDialog($dialog){
              $dialog.children(".dialog-panel").hide();
              $dialog.children(".dialog-masker").hide();
          }

          function center($target,top,left){
              if(!top){
                  var top = ($(window).height()-$target.outerHeight(true))/2;
              }
              if(!left){
                  var left = ($(window).width()-$target.outerWidth(true))/2;
              }
              $target.css({"position":"absolute","left":left,"top":top});
          }

      });


  </script>


</body>
</html>